<template>
	<view>
		<my-bar>
			<block slot="content">
				<text>{{title}}</text>
			</block>
			<block slot="right"></block>
		</my-bar>
		<scroll-view scroll-x class="bg-white nav padding-top-sm padding-bottom-0 sticky" :style="'top:'+CustomBar + 'px'">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in listNavs.list"
				 :key="index" @tap="tabSelect" :data-id="item.id" :data-cur="index">
					{{item.text}}
				</view>
			</view>
		</scroll-view>
		<com-card-list :listData="listData"></com-card-list>
	</view>
</template>

<script>
	import comCardList from "@/components/my-card-list.vue"
	import appModal from '@/components/my-modal.vue'
	import service from '../../common/service.js';
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			comCardList
		},
		mixins: [service],
		onLoad(e) {
			this.type = e.type;
		},
		data() {
			return {
				type: "",
				CustomBar: this.CustomBar,
				TabCur: 0,
				scrollLeft: 0
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.cur;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			}
		},
		computed: {
			// 映射带有命名空间的state，第一个参数模块名
			...mapState("pages", {
				listData: state => state.list.listData
			}),
			...mapState("base", ['listNavs']),
			title() {
				var navs = this.$store.state.base.navs.list;
				for (var idx in navs) {
					var nav = navs[idx];
					if (nav.name == this.type) {
						return nav.text;
						break;
					}
				}
				return "列表"
			}
		}
	}
</script>

<style>

</style>
